<script lang="ts">
import SwiperClass, { Navigation, Thumbs } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/thumbs";
import {
    ref,
    defineComponent,
    watch,
    onMounted
} from "vue";

export default defineComponent({
    props: ["scrollData"],
    name: "swiper-example-thumbs-gallery",
    title: "Thumbs gallery with Two-way control",
    url: import.meta.url,
    components: {
        Swiper,
        SwiperSlide,
    },
    async setup(props) {
        const productImgList = ref([]) as any
        productImgList.value = props.scrollData

        const isMaskShow = ref(false)

        const productReveal = ref([]) as any
        props?.scrollData?.forEach((item: any,) => {
            productReveal.value.push({ ['cover_image']: item, ['video_url']: '' })
        })
        watch(()=>props.scrollData,(newValue)=>{
            newValue.forEach((item:any)=>{
                productReveal.value.push({ ['cover_image']: item, ['video_url']: '' })

            })
        })
        const thumbsSwiper = ref(null);

        const setThumbsSwiper = (swiper: any) => {
            thumbsSwiper.value = swiper;
        };

        const swiperSlideClick = (item: any) => {
            isMaskShow.value = true
        }
        return {
            productImgList,
            isMaskShow,
            swiperSlideClick,
            productReveal,
            thumbsSwiper,
            setThumbsSwiper,
            modules: [Navigation, Thumbs],
        }
    }

})
</script>

<template>
    <div class="productSwipder">
        <div class="productSwiperShow">
            <swiper class="top-swiper" :style="{
                '--swiper-navigation-color': '#fff',
                '--swiper-pagination-color': '#fff',
            }" :navigation="{
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
}" :modules="modules" :space-between="10" :thumbs="{ swiper: thumbsSwiper }">
                <swiper-slide class="slide" v-for="(item, index) in productReveal" :key="index" @click="swiperSlideClick">
                    <div v-if="item.video_url.substr(-3) == 'mp4'" class="video">
                        <video :src="item.video_url" :poster="item.cover_image" autoplay controls class="videoPlay"></video>
                    </div>
                    <el-image :fit="'contain'" :src="item.cover_image" :preview-teleported="true"
                        :hide-on-click-modal="true" :preview-src-list="productImgList" :initial-index="index"
                        v-else></el-image>
                </swiper-slide>
                <div class="swiper-button-prev">
                    <i class="iconfont icon-xiangyou21-01"></i>
                </div>
                <div class="swiper-button-next">
                    <i class="iconfont icon-xiangyou-01"></i>
                </div>
            </swiper>
            <swiper class="thumbs-swiper" :modules="modules" :space-between="23" :slides-per-view="5"
                :watch-slides-progress="true" :prevent-clicks="false" :prevent-clicks-propagation="false"
                @swiper="setThumbsSwiper">
                <swiper-slide class="slide" v-for="(item, index) in productReveal" :key="index">
                    <div v-if="item.video_url.substr(-3) == 'mp4'" class="video">
                        <video :src="item.video_url" :poster="item.cover_image" class="videoPlay"></video>
                    </div>
                    <img :src="item.cover_image" alt="" v-else />
                </swiper-slide>
            </swiper>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.productSwipder {
    .productSwiperShow {
        .swiperShowItem {
            height: 420px;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 20px;
            }

            .video {
                width: 100%;
                height: 100%;
                border-radius: 20px;

                .videoPlay {
                    width: 100%;
                    height: 100%;
                    border-radius: 20px;
                    object-fit: cover;
                }
            }
        }
    }

    .productSwiperPreview {
        margin-top: 20px;

        .swiperPreviewItem {
            width: 107px !important;
            height: 107px;
            margin-right: 23px !important;

            img {
                width: 100%;
                height: 100%;
                border-radius: 20px;
                object-fit: cover;
                // object-fit: contain;
            }

            .video {
                width: 100%;
                height: 100%;
                border-radius: 20px;

                .videoPlay {
                    width: 100%;
                    height: 100%;
                    border-radius: 20px;
                    object-fit: cover;
                }
            }
        }

        .swiperPreviewCheckItem {
            border: 1px solid #000;
            border-radius: 20px;
        }
    }
}

.top-swiper,
.thumbs-swiper {
    .slide {
        min-height: 100%;
        // height: 450px;

        img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            // object-fit: contain;
            border-radius: 20px;
        }

        .el-image {
            display: block;
            width: 100%;
            height: 100%;
            // object-fit: cover;
            object-fit: contain;
            border-radius: 20px;
        }

        .video {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 20px;

            .videoPlay {
                width: 100%;
                height: 100%;
                border-radius: 20px;
                object-fit: cover;
            }
        }
    }
}

.top-swiper {
    height: 80%;
    width: 100%;
    margin-bottom: 20px;
}

.thumbs-swiper {
    height: 20%;
    box-sizing: border-box;

    .slide {
        width: 25%;
        opacity: 1;

        &:not(.swiper-slide-thumb-active) {
            opacity: 0.4;
        }
    }
}

.swiper-button-prev,
.swiper-button-next {
    width: 50px;
    height: 50px;

    &::after {
        font-size: 0px;
        background-color: #fff;
        color: #6e6e73;
        padding: 0;
        border-radius: 50px;
    }

    .iconfont {
        color: #fff;
        font-size: 50px;
    }
}


@media screen and (max-width: 450px) {
    .thumbs-swiper{
        display: none;
    }

    .top-swiper{
        margin-bottom: 0;
    }
}
</style>